<%@ page import="java.util.Map" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: micro
  Date: 4/5/2019
  Time: 5:54 AM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        #chartdiv{
            width: 800px;
            height:800px;
            margin:0px auto;
        }
    </style>
</head>
<body>
<div id="chartdiv">
    <h2>Top10 ip</h2>
    <canvas id="myChart">

    </canvas>
    <table class="table table-bordered" style="width: 500px">
        <thead>
        <tr>
            <th>url</th>
            <th>count</th>
        </tr>
        </thead>
        <c:forEach items="${res}" var="re">
            <tr>
            <td>${re.key}</td>
            <td>${re.value}</td>
            </tr>
        </c:forEach>
    </table>
</div>


<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var labes = new Array();
    var i = 0;
    <c:forEach items="${us}" var="u">
        labes[i++] = '${u}';
    </c:forEach>
    var myChart = new Chart(ctx, {
        type: 'bar',

        // The data for our dataset
        data: {
            labels: labes,
            datasets: [{
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: ${vs}
            }]
        },
        // Configuration options go here
        options: {

        }
    });


</script>
</body>
</html>
